<template>
	<view>
		<view class="list-view">

			<view class="action-box" v-for="(item,i) in _fridge_list" :key="item.fid" @click="handlerClick(item)">

				<uni-swipe-action>
					<uni-swipe-action-item :right-options="option" :show="item.isOpened" :auto-close="false"
						@change="change" @click="deleteItem">
						<view class="item-box">

							<view class="left">
								<image :src="item.backgroundUrl" style="height: 200rpx; width: 30%;" mode="aspectFit">
								</image>
								<view class="desc">
									<text class="name-text">{{item.name}}</text>
									<view class="brand-model-text">
										<text class="brand-text">{{item.brand}}</text>
										<text class="model-text">{{item.model}}</text>
									</view>
								</view>
							</view>

							<view class="member-box" v-if="showInvite">
								<uni-icons type="personadd" size="50" color="#4080ff"></uni-icons>
							</view>
							<uni-icons type="forward" size="30" color="#828282" style="width: 5%;"
								v-if="showArrow"></uni-icons>

							<uni-icons type="checkmarkempty" size="30" color="#165dff" style="width: 10%;"
								v-if="showCheck&&defautl_fid===item.fid">
							</uni-icons>
							<text class="default-tips" v-if="defautl_fid===item.fid&&showDefaultTips">默认</text>

						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "my-fridge-list",
		props: {
			fridge_list: {
				type: Array,
				default: []
			},
			defautl_fid: {
				type: Number
			},
			showInvite: {
				default: true
			},
			showArrow: {
				default: true
			},
			showDefaultTips: {
				default: true
			},
			showCheck: {
				default: false
			}
		},
		data() {
			return {
				option: [{
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
			};
		},

		computed: {
			_fridge_list() {
				this.fridge_list.forEach(x => x.isOpened = 'none')
				return this.fridge_list
			}
		},

		methods: {

			// 跳转
			gotoInviteMember(obj) {
				uni.navigateTo({
					url: '/pagesSub/pageFridge/member_invite/member_invite?fridge=' + JSON.stringify(obj)
				})
			},
			// 事件处理
			// 子传父
			handlerClick(obj) {
				this.$emit('detail', obj)
				this.$emit('switch', obj.fid)
			},

			deleteItem(e) {
				console.log(this.fridge_list[e.index]);
				// 删除确认
				uni.showModal({
					title: '警告',
					content: `确认删除冰箱${this.fridge_list[e.index].name}？`,
					confirmColor: 'red',
					success: (res) => {
						if (res.confirm) {
							uni.$api.fridge.delete(this.fridge_list[e.index].fid)
						}
					}
				})
			},

			change(e) {
				console.log('返回：', e);
			},
		}
	}
</script>

<style lang="scss">
	.list-view {
		padding-left: 25rpx;
		padding-right: 25rpx;

		.action-box {
			margin-top: 25rpx;

			.item-box {
				display: flex;
				background-color: #fff;

				padding: 15rpx;
				border-radius: 20rpx;
				align-items: center;
				position: relative;
				overflow: hidden;
				justify-content: space-between;

				.left {
					display: flex;
					width: 70%;

					.desc {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin-left: 30rpx;
						flex: 1;

						.name-text {
							font-size: 45rpx;
						}

						.brand-model-text {
							display: flex;
							flex-direction: column;
							color: #abb2bb;
							font-size: 20rpx;

						}
					}
				}

				.member-box {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.default-tips {
					position: absolute;
					top: 5rpx;
					right: 8rpx;
					color: #828282;
				}
			}
		}


	}
</style>